<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-写作突破-亮点单词/短语-单词闯关'">
        </Breadcrumb>
        <view class="content">
          <WordLook
            ref="wordLook"
            v-if="stage === 1"
            :key="componentKey"
            :chapterData="chapterData"
            :wordData="wordData"
            @change="wordChange"
            @save="wordSave"
          ></WordLook>
          <WordListen
            ref="wordListen"
            v-else-if="stage === 2"
            :key="componentKey"
            :chapterData="chapterData"
            :wordData="wordData"
            @change="wordChange"
            @save="wordSave"
          ></WordListen>
          <WordTest
            ref="wordTest"
            v-else-if="stage === 3"
            :key="componentKey"
            :chapterData="chapterData"
            :wordList="wordList"
            @save="testSave"
            @close="handleClose"
          ></WordTest>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  findNextWord,
  phraseWordPassSave,
  testCommit,
} from "@/api/composition";
export default {
  components: {},
  data() {
    return {
      id: "",
      stage: 0,
      chapterData: {},
      wordData: null,
      componentKey: 0,
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.init();
  },
  methods: {
    init() {
      //default
      this.getWord();
    },
    wordChange() {
      this.getWord().then(() => {
        this.componentKey += 1;
      });
    },
    wordSave(id, flag) {
      let params = {
        typeId: this.id,
        wordId: id,
        isPass: flag,
        stage: this.stage,
      };
      phraseWordPassSave(params);
    },
    testSave() {
      let params = {
        id: this.id,
      };
      testCommit(params).then(() => {
        this.$refs.wordTest.handlePopup();
      });
    },
    handleClose() {
      uni.navigateTo({
        url: "/pages/composition/compositionPhrase",
      });
    },
    async getWord() {
      let params = {
        id: this.id,
      };
      await findNextWord(params).then((res) => {
        this.stage = res.data.stage;
        if (this.stage === 1 || this.stage === 2) {
          this.wordData = res.data.word;
        } else if (this.stage === 3) {
          this.wordList = res.data.list;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./compositionPhrasePassDetail";
</style>
